<template>
  <div>
    <div class="ip-container">
      <el-container>
        <el-main>
          <el-row>
            <el-form :inline="true" size="small" :model="ipFormInline" class="demo-form-inline"
                     @keyup.enter.native="ipQuery" @submit.native.prevent>
              <el-form-item>
                <el-button type="primary" icon="el-icon-plus" v-if="permissions.indexOf('ip_add') > -1"
                           @click="ipOpenCreateDialog">添加
                </el-button>
                <el-button type="primary" v-if="permissions.indexOf('ip_effect') > -1"
                           @click="IPEffect">生效
                </el-button>
                <el-switch
                    @change="IPPowerSwitch"
                    active-text="开启"
                    inactive-text="关闭"
                    v-model="ipPower"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
              <el-form-item>
                <el-input v-model="ipPageData.query.ip" placeholder="ip地址"/>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="ipQuery">查询</el-button>
                <el-button class="margin-left-10" icon="el-icon-delete" @click="ipReset">清空</el-button>
              </el-form-item>
              <el-tooltip effect="dark" content="刷新" placement="top-start">
                <el-button size="small" style="float: right;" icon="el-icon-refresh" @click="ipQuery"
                           circle></el-button>
              </el-tooltip>
            </el-form>
          </el-row>
          <el-table
              border
              stripe
              size="mini"
              :data="ipPageData.pageInfo.records"
              highlight-current-row
              ref="ipTable">
            <el-table-column label="序号" width="80" align="center">
              <template slot-scope="scope">
                <span>{{scope.$index+(ipPageData.pageInfo.current - 1) * ipPageData.pageInfo.size + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip/>
            <el-table-column prop="ip" label="ip地址" align="center" show-overflow-tooltip/>
            <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip/>
            <el-table-column label="操作" width="200px" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-view" @click="lookIp(scope.row)">查看</el-button>
                <el-button type="text" size="small" icon="el-icon-edit" @click="ipOpenUpdateDialog(scope.row)"
                           v-if="permissions.indexOf('ip_edit') > -1">修改
                </el-button>
                <el-button type="text" size="small" icon="el-icon-delete" @click="ipDeleteRecord(scope.row)"
                           v-if="permissions.indexOf('ip_del') > -1">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end" v-show="ipPageData.pageInfo.total>0">
            <el-pagination class="pageBar"
                           background
                           @size-change="ipSizeChange"
                           @current-change="ipCurrentChange"
                           :current-page="ipPageData.pageInfo.current"
                           :page-sizes="[5, 10, 20, 30, 50]"
                           :page-size="ipPageData.pageInfo.size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="ipPageData.pageInfo.total">
            </el-pagination>
          </el-row>
        </el-main>
      </el-container>
      <el-dialog
          customClass="ipIndex"
          :title="ipDialogData.ipTitle"
          :visible.sync="ipDialogData.visible"
          :close-on-click-modal="false"
          width="600px"
          append-to-body="true"
          @close="cancelIpDialog()">
        <el-container>
          <el-main>
            <el-form ref="ipForm" :rules="ipRules" :model="ipDialogData.ipFormData"
                     label-width="80px">
              <el-form-item label="名称" ref="name" prop="name">
                <el-input :disabled="isIpLook" v-model="ipDialogData.ipFormData.name"/>
              </el-form-item>
              <el-form-item label="ip地址" ref="ip" prop="ip" v-if="!this.ipDialogData.isEdit">
                <el-input :disabled="isIpLook" v-model="ipDialogData.ipFormData.ip"/>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer" v-show="!isIpLook">
          <el-button @click="ipSaveOrUpdate" type="primary">确 定</el-button>
          <el-button @click="cancelIpDialog()">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import ipApi from "./api/ip.service"

export default {
  components: {},
  data() {
    return {
      ipRules: {
        ip: [
          {
            required: true,
            message: 'ip地址不能为空！',
          },
          {
            pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
            message: "ip地址格式不对！！",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: '名称不能为空！',
          },
        ],
      },
      ipPower:false,
      permissions: JSON.parse(sessionStorage.getItem('permissions')),
      ipFormInline: {},
      isIpLook: false,
      ipDialogData: {
        isEdit: false,
        visible: false,
        ipTitle: '',
        ipFormData: {
          name: '',
          ip: '',
        },
      },
      ipPageData: {
        query: {
          ip: '',
        },
        pageInfo: {
          size: 10,
          current: 1,
          total: 0,
        }
      },
    };
  },
  created() {
    this.ipQuery();
    this.IPPowerStatus();
  },
  methods: {

    /**
     * 白名单管理查询
     * @author wangwuhui
     * @date 2020-12-22 14:35:28
     */
    ipQuery() {
      let _this = this;
      ipApi.getIpPage(
        Object.assign({
          current: this.ipPageData.pageInfo.current,
          size: this.ipPageData.pageInfo.size
        }, this.ipPageData.query)
      ).then((res) => {
        _this.ipPageData.pageInfo = res.data;
      })
    },
    /**
     * 白名单管理查询重置
     * @author wangwuhui
     * @date 2020-12-22 14:35:28
     */
    ipReset() {
      this.ipPageData.query.ip = '';
      this.ipQuery();
    },

    /**
     * 白名单管理页码变化
     * @author wangwuhui
     * @date 2020-12-22 14:35:28
     */
    ipSizeChange(val) {
      this.ipPageData.pageInfo.size = val;
      this.ipQuery();
    },

    /**
     * 白名单管理当前页
     * @author wangwuhui
     * @date 2020-12-22 14:35:28
     */
    ipCurrentChange(val) {
      this.ipPageData.pageInfo.current = val;
      this.ipQuery();
    },

    /**
     * 白名单管理添加
     * @author wangwuhui
     * @date 2020-12-22 14:35:28
     */
    ipOpenCreateDialog() {
      this.ipDialogData.ipTitle = '添加';
      this.ipDialogData.visible = true;
      this.ipDialogData.isEdit = false;
      this.ipDialogData.ipFormData = {
        name: '',
        ip: '',
      };
    },

    /**
     * 白名单管理修改
     * @author wangwuhui
     * @date 2020-12-22 14:35:28
     */
    ipOpenUpdateDialog(row) {
      this.ipDialogData.ipTitle = '修改'
      this.ipDialogData.visible = true;
      this.ipDialogData.isEdit = true;
      let _this = this;
      ipApi.getIpById(row.id).then((res) => {
          _this.ipDialogData.ipFormData = res.data;
        }
      ).catch((res) => {
        console.log(res)
      });
      ;
    },

    /**
     * 白名单管理保存
     * @author wangwuhui
     * @date 2020-12-22 14:35:28
     */
    ipSaveOrUpdate() {
      let _this = this;
      this.$refs["ipForm"].validate((valid) => {
        if (_this.ipDialogData.ipFormData.id != null) {
          ipApi.updateIpById(this.ipDialogData.ipFormData).then((res) => {
            if (res.code === 10200) {
              this.$message.success('修改成功！');
              _this.ipDialogData.visible = false;
              _this.ipQuery();
            } else {
              _this.$alert(res.msg, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          });
        } else {
          ipApi.saveIp(this.ipDialogData.ipFormData).then((res) => {
            if (res.code === 10200) {
              this.$message.success('添加成功！');
              _this.ipDialogData.visible = false;
              _this.ipQuery();
            } else {
              _this.$alert(res.msg, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          }).catch((res) => {
            console.log(res)
          });
          ;
        }
      })
    },

    /**
     * 白名单管理查看
     * @author wangwuhui
     * @date 2020-12-22 14:35:28
     */
    lookIp(row) {
      this.ipDialogData.visible = true;
      this.ipDialogData.ipTitle = "查看";
      this.isIpLook = true;
      this.ipDialogData.ipFormData = JSON.parse(JSON.stringify(row));
    },

    /**
     * 白名单管理关闭
     * @author wangwuhui
     * @date 2020-12-22 14:35:28
     */
    cancelIpDialog() {
      let obj = {
        name: '',
        ip: '',
      }
      this.ipDialogData.ipFormData = obj
      this.$refs["ipForm"].resetFields()
      this.ipDialogData.visible = false
      this.isIpLook = false

    },

    /**
     * 白名单管理删除
     * @author wangwuhui
     * @date 2020-12-22 14:35:28
     */
    ipDeleteRecord(data) {
      if (data.id <= 0) {
        this.$alert('请先选择一条要删除的记录！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
        return
      }

      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ipApi.deleteIp(data.id).then((res) => {
          if (res.data > 0) {
            this.$message({
              type: 'success',
              message: '白名单管理删除成功!'
            })
            this.ipQuery()
          } else {
            this.$message({
              type: 'error',
              message: '白名单管理删除失败!'
            })
          }

        })
      })
    },

    /**
     * 白名单管理，将IP白名单添加到redis
     * @author wangwuhui
     * @date 2020-12-23 16:35:28
     */
    IPEffect() {
      ipApi.IPEffect().then((res) => {
        if (res.code === 10200) {
          this.$message({
            type: 'success',
            message: '白名单生效！'
          })
          this.ipQuery()
        } else {
          this.$message({
            type: 'error',
            message: '白名单生效失败!'
          })
        }

      })
    },

    /**
     * 白名单开启关闭
     * @author wangwuhui
     * @date 2020-12-24 9:30:00
     */
    IPPowerSwitch() {
      let msg;
      if(this.ipPower){
        msg="白名单开启";
      }else {
        msg="白名单关闭";
      }
      ipApi.IPPowerSwitch({"ipPower":this.ipPower}).then(res => {
        if (res.code === 10200) {
          this.$message({
            type: 'success',
            message: msg+'成功！'
          })
          this.ipQuery()
        } else {
          this.$message({
            type: 'error',
            message: msg+'失败!'
          })
        }

      })
    },

    /**
     * 白名单状态查询
     * @author wangwuhui
     * @date 2020-12-24 9:30:00
     */
    IPPowerStatus() {
      ipApi.IPPowerStatus().then(res => {
        if (res.code === 10200) {
          this.ipPower = res.data;
        }
      })
    }
  }
}
</script>
